<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue-2.5.21.js"></script>
    <style>
        .tou {
            background-color: skyblue;
            width: 100%;
            height: 105px;
            text-align: center;
        }
        
        .tou>input {
            background-color: aliceblue;
            text-align: center;
            border-radius: 10px;
            height: 20px;
        }
        
        .lunbotu {
            width: 90%;
            height: 95px;
            background-color: aqua;
            margin: 10px auto;
        }
        
        .lbiao {
            width: 100%;
            /* display: flex; */
            flex-wrap: wrap;
            align-content: space-around;
        }
        
        .liebiao {
            float: left;
            background-color: #f5f5ff;
            margin: 0 14px 6px;
            padding: 2px;
        }
        
        .dianjia {
            width: 100%;
            padding: 5px;
        }
        
        .dianjia>img {
            width: 80px;
            float: left;
        }
        
        .dianjia>p {
            margin: 0;
        }
        
        .dibu {
            width: 100%;
            position: fixed;
            bottom: 10px;
            display: flex;
        }
        
        .di {
            float: left;
            text-align: center;
            line-height: 30px;
            width: 32%;
            height: 30px;
            border: 1px solid bisque;
            background: gray;
        }
        
        .gaolian1 {
            background-color: #aaa;
        }
        
        .gaolian {
            background-color: aqua;
            color: white;
        }
    </style>
</head>

<body>
    <div id="big">
        <div class="tou">
            <h3 style="float: left;">饿了吗</h3> <br><br><br>
            <input type="text" placeholder="输入商家、商品名称">

        </div>
        <div>
            <div class="lunbotu"></div>
        </div>
        <p>猜你喜欢</p>
        <div class="lbiao">
            <!-- :style="{color: currentIndex == index?'white':'', background: currentIndex == index?'red':'' }"  -->

            <div class="liebiao" v-for="(item,index) in list" :class="myindex === index ?'gaolian1':'' " @click="color(index)">{{item}}</div>
        </div>
        <div>
            <div class="dianjia" v-for="item in list2">
                <img :src="item[0]" alt="">
                <p>{{item[1]}}</p>
                <p>{{item[2]}}</p>
                <p>{{item[3]}}</p>
                <p>{{item[4]}}</p>
            </div>
        </div>
        <div class="dibu">
            <div class="di" v-for="(item ,index) in list3" :class="myclass ===index?'gaolian':''" @click="bs(index)">{{item}}</div>
        </div>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#big",
        data: {
            myindex: "0",
            list: ["综合排序", "距离最近", "销量最高", "筛选"],
            list2: [
                ["./1.png", "金百万烤鸭(苏家坨店)", "4.3 月销1632", "起送￥20 远距离￥3 ￥6", "30减12 70减35 100减40"],
                ["./1.png", "稻香金源饺子店", "4.4 月销230", "起送￥20 配送￥3.5", "40减5 69减8 100减10"],
                ["./1.png", "稻香金源饺子店", "4.4 月销230", "起送￥20 配送￥3.5", "40减5 69减8 100减10"],
                ["./1.png", "金百万烤鸭(苏家坨店)", "4.3 月销1632", "起送￥20 远距离￥3 ￥6", "30减12 70减35 100减40"]

            ],
            list3: ["首页", "订单", "我的"],
            myclass: "0"
        },
        methods: {
            color(index) {
                this.myindex = index;
                console.log(index)
            },
            bs(index) {
                console.log(index)
                this.myclass = index;

            }
        },
    })
</script>

</html>